
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Collapse, Divider} from 'antd';
import {conventEnumValueToString} from '../utils';
import {cabinetType, packingType} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {FILES_API} from '../constants';
const {Description} = DescriptionList;
import styles from './style.css';
const EMPTY_ARRAY = [];
const Panel = Collapse.Panel;
import DetailTable from './DetailTable';
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    render() {
        const {details = [], attachments = []} = this.props.detail;
        const fileList = attachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
            {item.fileName}</a></Description>));
        const packingPanel = details.map(p => {
            const header = (
                <Row>
                    <Col span={4}>
                        <Ellipsis tooltip length={36}>{p.pickingListCodes}</Ellipsis>
                    </Col>
                    <Col span={20}>
                        {`${this.props.intl.formatMessage({
                            id: 'commonDetail.info.workKind',
                            defaultMessage: ' 包装类型/规格'
                        })}: ${conventEnumValueToString(packingType, p.packingType)} / ${p.container}`}
                    </Col>
                </Row>
            );
            const dataSource = p.packingListDetails || EMPTY_ARRAY;
            return (
                <Panel key={p.packingListId} header={header}>
                    <DescriptionList>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.form.length',
                                defaultMessage: '长度（mm）'
                            })}>
                            <span className="value-font">{p.length}</span>
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.form.width',
                                defaultMessage: '宽度（mm）'
                            })}>
                            <span className="value-font">{p.width}</span>
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.form.height',
                                defaultMessage: '高度（mm）'
                            })}>
                            <span className="value-font">{p.height}</span>
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.form.volume',
                                defaultMessage: '体积（m³）'
                            })}>
                            <span className="value-font">{p.volume}</span>
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.form.netWeight',
                                defaultMessage: '净重（kg）'
                            })}>
                            <span className="value-font">{p.netWeight}</span>
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.form.grossWeight',
                                defaultMessage: '毛重（kg）'
                            })}>
                            <span className="value-font">{p.grossWeight}</span>
                        </Description>
                    </DescriptionList>
                    <DetailTable data={dataSource} />
                </Panel>
            );
        });
        return (
            <div>
                <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '排柜单信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerCode',
                                defaultMessage: '总代编号'
                            })}>
                            {this.props.detail.dealerCode}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerName',
                                defaultMessage: '总代名称'
                            })}>
                            {this.props.detail.dealerName}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.country',
                                defaultMessage: '国家/地区'
                            })}>
                            {this.props.detail.country}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.containerNo',
                                defaultMessage: '柜图号'
                            })}>
                            {this.props.detail.containerNo}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.cabinetType',
                                defaultMessage: '柜型'
                            })}>
                            {conventEnumValueToString(cabinetType, this.props.detail.cabinetType)}
                        </Description>
                    </DescriptionList>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.details.title',
                        defaultMessage: '装箱单清单'
                    })}
                    bordered={false}>
                    <Collapse>
                        {packingPanel}
                    </Collapse>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.title',
                        defaultMessage: '附件清单'
                    })}
                    bordered={false}>
                    {fileList.length ? <DescriptionList col={1} size="large">
                        {fileList}
                    </DescriptionList> : this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.noData',
                        defaultMessage: '暂无附件'
                    })}
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDetail: PropTypes.bool,
    operations: PropTypes.any,
};
export default injectIntl(Detail);
